<template>
  <el-container>
    <el-aside width="180px" style="border-right: 1px solid #e6e6e6; padding: 10px">
      <el-menu @select="handleSelect" :default-active="defaultActive">
        <el-menu-item index="send_box">
          <el-icon><el-icon-message-box /></el-icon>
          <template #title>已发送</template>
        </el-menu-item>
        <el-menu-item index="receive_box">
          <el-icon><el-icon-message /></el-icon>
          <template #title>收信箱</template>
        </el-menu-item>
        <el-menu-item v-for="item in messageType" :key="item.key" :index="item.key">
          <el-icon
            ><Component
              :is="typeIcon[item.value] ? typeIcon[item.value] : 'el-icon-message'"
          /></el-icon>
          <template #title>{{ item.name }}</template>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container ref="printMain">
      <el-header>
        <div class="left-panel">
          <el-button icon="el-icon-plus" type="primary" @click="add">发信息</el-button>

          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            :disabled="selection.length == 0"
            @click="del(selection, true)"
            >删除</el-button
          >

          <el-radio-group
            v-model="queryParams.read_status"
            style="margin-left: 10px"
            v-if="defaultActive !== 'send_box'"
            @change="readStatusChange"
          >
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="0">未读</el-radio-button>
            <el-radio-button label="1">已读</el-radio-button>
          </el-radio-group>
        </div>
        <div class="right-panel">
          <el-input placeholder="搜索标题" />
          <el-tooltip class="item" effect="dark" content="搜索" placement="top">
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handlerSearch"
            ></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="清空条件" placement="top">
            <el-button icon="el-icon-refresh" @click="resetSearch"></el-button>
          </el-tooltip>
        </div>
      </el-header>
      <el-main class="nopadding">
        <maTable
          ref="table"
          :api="api"
          @selection-change="selectionChange"
          :autoLoad="false"
          stripe
          remoteSort
          remoteFilter
        >
          <el-table-column type="selection" width="50"></el-table-column>

          <el-table-column
            label="消息类型"
            prop="content_type"
            sortable="custom"
            width="120"
          >
            <template #default="scope">
              <ma-dict-tag :options="messageType" :value="scope.row.content_type" />
            </template>
          </el-table-column>

          <el-table-column
            label="发送人"
            prop="send_user.nickname"
            sortable="custom"
            v-if="defaultActive !== 'send_box'"
            width="120"
          />

          <el-table-column
            label="标题"
            prop="title"
            show-overflow-tooltip
          ></el-table-column>

          <el-table-column
            label="发送时间"
            prop="created_at"
            width="200"
            sortable="custom"
          ></el-table-column>

          <el-table-column label="操作" width="220">
            <template #default="scope">
              <el-button @click="del(scope.row.id)">删除</el-button>
              <el-button @click="showDetails(scope.row)">详细</el-button>
              <el-button
                v-if="defaultActive === 'send_box'"
                @click="showReceiveList(scope.row.id)"
                >接收人员</el-button
              >
            </template>
          </el-table-column>
        </maTable>
      </el-main>
    </el-container>
  </el-container>

  <el-drawer v-model="drawer" title="详细内容" size="50%">
    <el-main
      v-loading="drawerLoading"
      element-loading-background="rgba(50, 50, 50, 0.5)"
      element-loading-text="数据加载中..."
      style="height: 100%"
    >
      <h2 style="font-size: 24px; line-height: 60px; text-align: center">
        {{ row.title }}
      </h2>
      <div v-html="row.content"></div>
    </el-main>
  </el-drawer>

  <el-dialog v-model="sendDialog" title="接收人列表" append-to-body destroy-on-close>
    <maTable ref="receiveList" :api="receiveListApi" :autoLoad="false" stripe>
      <el-table-column label="用户名" prop="username" />
      <el-table-column label="昵称" prop="nickname" />
      <el-table-column label="查看状态" prop="read_status" />
    </maTable>
  </el-dialog>

  <create-message ref="send_msg" />
</template>

<script>
import createMessage from "./createMessage";
export default {
  name: "message",
  components: {
    createMessage,
  },
  data() {
    return {
      api: { list: () => {} },
      receiveListApi: { list: () => {} },
      defaultActive: "receive_box",
      messageType: [],
      typeIcon: {
        carbon_copy_mine: "el-icon-copy-document",
        todo: "el-icon-calendar",
        announcement: "el-icon-cellphone",
        notice: "el-icon-bell",
        private_message: "el-icon-chat-line-round",
      },
      queryParams: { read_status: "all" },
      selection: [],
      drawer: false,
      drawerLoading: true,
      sendDialog: false,
      row: {
        title: "",
        content: "",
      },
    };
  },

  async mounted() {
    await this.getDictData();

    await this.loadData();
  },

  methods: {
    loadData(type = undefined) {
      if (!this.defaultActive) return;

      this.api.list =
        this.defaultActive === "send_box"
          ? this.$API.queueMessage.getSendList
          : this.$API.queueMessage.getReceiveList;

      this.queryParams = { read_status: "all" };
      this.queryParams.content_type = type;
      this.$refs.table.reload(this.queryParams);
    },

    readStatusChange(value) {
      this.queryParams.read_status = value;
      this.$refs.table.upData(this.queryParams);
    },

    async showDetails(row) {
      this.drawerLoading = true;
      this.drawer = true;
      await this.$API.queueMessage.updateReadStatus.post(row.id);
      this.drawerLoading = false;
      this.row = row;
    },

    showReceiveList(id) {
      this.sendDialog = true;
      this.$nextTick(() => {
        this.receiveListApi.list = this.$API.queueMessage.getReceiveUser.get;
        this.$refs.receiveList.reload({ id });
      });
    },

    add() {
      this.$nextTick(() => {
        this.$refs.send_msg.open();
      });
    },

    // 删除
    async del(id, batch = false) {
      let msg = batch ? "确定要删除选中的消息吗？" : "确定删除该消息吗？";
      await this.$confirm(msg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$API.queueMessage.deletes.post(batch ? id.join(",") : id).then((res) => {
            res.success && this.$message.success(res.message);
            res.success || this.$message.error(res.message);
          });
          this.$refs.table.upData(this.queryParams);
        })
        .catch(() => {});
    },

    // 菜单点击事件
    handleSelect(name) {
      this.defaultActive = name;
      this.loadData(name === "receive_box" || name === "send_box" ? undefined : name);
    },

    // 处理搜索事件
    handlerSearch() {
      this.$refs.table.upData(this.queryParams);
    },

    // 重置搜索
    resetSearch() {
      this.loadData(this.defaultActive);
    },

    // 选择事件
    selectionChange(selection) {
      this.selection = selection.map((item) => item.id);
    },

    // 查询字典
    async getDictData() {
      var data = await this.$API.system.dic.get.get({
        filter: [{ "DicCategory.code": "messageType" }],
      });
      this.messageType = data.data;
    },
  },
};
</script>

<style scoped lang="scss">
.el-menu-item.is-active {
  background: var(--el-background-color-base);
}
.el-menu-item {
  border-radius: 4px;
}
.innerPage {
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 1610px) {
  .innerPage {
    width: 100%;
  }
}
</style>
